{% extends '../temp_base.html' %}

{% block local_header_css_js %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.css">

{% end %}

{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Change System Permission
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Permission Management</a></li>
        <li class="active">Change System Permission</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- add content for group -->
        <div class="col-md-8">
          <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">System: <b>{{system.name}}</b></h3>
            </div>
            <!-- /.box-header -->
            <!-- form start group -->
            <form class="form-horizontal" action="../saveobject" method="post">
              <input type="hidden" name="sys_id" value="{{system.id}}">
              <input type="hidden" name="act_type" value="change_system_perm">
              <div class="box-body">
                <div class="form-group">
                  <label for="sel_sys_hosts" class="col-sm-2 control-label">Select Groups</label>
                  <div class="col-sm-10">
                    <div class="row">
                      <div class="col-xs-5">
                        <select id="mulsel_sel_groups" name="x" class="form-control" size="11" multiple="multiple">
                        {% for group in other_group_list %}
                          <option value="{{group.id}}">{{group.name}}</option>
                        {% end %}
                        </select>
                      </div>
                      <div class="col-xs-2">
                        <button type="button" id="mulsel_sel_groups_undo" class="btn btn-primary btn-block">undo</button>
                        <button type="button" id="mulsel_sel_groups_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="mulsel_sel_groups_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="mulsel_sel_groups_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="mulsel_sel_groups_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>  
                        <button type="button" id="mulsel_sel_groups_redo" class="btn btn-warning btn-block">redo</button>
                      </div>
                      <div class="col-xs-5">
                        <select id="mulsel_sel_groups_to" name="group_list" class="form-control" size="11" multiple="multiple">
                        {% for group in group_list %}
                          <option value="{{group.id}}">{{group.name}}</option>
                        {% end %}
                        </select>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <!-- /.box-body -->
              
              <div class="box-body">
                <div class="form-group">
                  <label for="sel_sys_hosts" class="col-sm-2 control-label">Select Users</label>
                  <div class="col-sm-10">
                    <div class="row">
                      <div class="col-xs-5">
                        <select id="mulsel_sel_users" name="y" class="form-control" size="11" multiple="multiple">
                        {% for user in other_user_list %}
                          <option value="{{user.id}}">{{user.name}} ({{user.fullname}})</option>
                        {% end %}
                        </select>
                      </div>
                      <div class="col-xs-2">
                        <button type="button" id="mulsel_sel_users_undo" class="btn btn-primary btn-block">undo</button>
                        <button type="button" id="mulsel_sel_users_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="mulsel_sel_users_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="mulsel_sel_users_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="mulsel_sel_users_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>  
                        <button type="button" id="mulsel_sel_users_redo" class="btn btn-warning btn-block">redo</button>
                      </div>
                      <div class="col-xs-5">
                        <select id="mulsel_sel_users_to" name="user_list" class="form-control" size="11" multiple="multiple">
                        {% for user in user_list %}
                          <option value="{{user.id}}">{{user.name}} ({{user.fullname}})</option>
                        {% end %}
                        </select>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="submit" class="btn btn-info pull-right">Save</button>
              </div>
              <!-- /.box-footer -->
            </form>
          </div>
          <!-- /.box -->
        </div>
        <!--/.add content for group-->        
      </div>
      <!-- /.row -->
      
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{% end %}

{% block local_footer_css_js %}
<!-- DataTables -->
<script src="{{HTML_URL_BASE}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{HTML_URL_BASE}}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{HTML_URL_BASE}}/plugins/fastclick/fastclick.js"></script>
<!-- multiselect -->
<script src="{{HTML_URL_BASE}}/others/js/multiselect.min.js"></script>
<script src="{{HTML_URL_BASE}}/others/js/prettify.min.js"></script>
<!-- page script -->
<script>
  $(function () {
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
    
    $("#btn_create_user").click(function(){
        window.location.href='addgroup';
    });
    
    $('#mulsel_sel_groups').multiselect();
    $('#mulsel_sel_users').multiselect();
    
  });
</script>
{% end %}
